<template>
  <div style="width:100%;height:100%;position: relative;">

      <canvas ref="canvasRef"
              style="border: 1px solid"
              width='1024' height='720'></canvas>

  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {LGraph, LGraphCanvas, LiteGraph} from "litegraph.js";
import 'litegraph.js/css/litegraph.css'
const canvasRef = ref(null)
onMounted(() => {
  let graph = new LGraph();
  let canvas = new LGraphCanvas(canvasRef.value, graph);
  // graph.onAfterExecute = function() {
  //   canvas.draw(true);
  // };
  let node_const = LiteGraph.createNode("basic/const");
  node_const.pos = [200, 200];
  graph.add(node_const);
  node_const.setValue(4.5);


  let node_const2 = LiteGraph.createNode("basic/const");
  node_const2.pos = [200, 300];
  graph.add(node_const2);
  node_const2.setValue(4.4);
  // canvas.resize();
  graph.start()
})
</script>